<template>
  <div class="category">
    <div class="search" @click="toSearch">
      <div class="ser">
        <span class="icon"></span>
        <span>商品搜索，共237款好物</span>
      </div>
    </div>
    <div class="content">
      <scroll-view class="left" scroll-y="true">
        <div
          class="iconText"
          v-for="(item, index) in listData"
          :key="index"
          :class="[index ===nowIndex?'active':'']"
          @click="selectItem(item.id,index)"
        >{{item.name}}</div>
      </scroll-view>
      <scroll-view class="right" scroll-y="true">
        <div class="banner">
          <img :src="detailData.banner_url" />
        </div>
        <div class="title">
          <span>-</span>
          <span>{{detailData.name}}分类</span>
          <span>-</span>
        </div>
        <div class="bottom">
          <div
            class="item"
            v-for="(item, index) in detailData.subList"
            :key="index"
            @click="categoryList(item.id)"
          >
            <img :src="item.wap_banner_url"  />
            <span>{{item.name}}</span>
          </div>
        </div>
      </scroll-view>
    </div>
  </div>
</template>

<script>
import { get } from "../../utils/index";
export default {
  data() {
    return {
      listData: [],
      nowIndex: 0,
      id: 1005000,
      detailData: {}
    };
  },
  mounted() {
    this.getList();
    //~默认展示居家
    this.selectItem(this.id, this.nowIndex);
  },
  methods: {
    toSearch() {
      wx.navigateTo({
        url: "/pages/search/main"
      });
    },
    async getList() {
      const data = await get("/category/indexAction");
      this.listData = data.categoryList;
    },
    async selectItem(id, index) {
      //获取右边商品的数据
      this.nowIndex = index;
      const data = await get("/category/currentAction", {
        id: id
      });
      // console.log(data);
      this.detailData = data.data.currentOne;
    },
    categoryList(id) {
      wx.navigateTo({
        url: "/pages/categorylist/main?id=" + id
      });
    }
  }
};
</script>

<style lang="less" scoped>
@import url("./style.less");
</style>
